<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%-- <%@ include file="/WEB-INF/views/include/head.jsp"%> --%>

<%@ include file="/WEB-INF/views/include/taglib.jsp"%>

<html>
<head>
<!-- <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> -->
<meta name="description" content="File Upload widget with multiple file selection, drag&amp;drop support, progress bars, validation and preview images, audio and video for jQuery. Supports cross-domain, chunked and resumable file uploads and client-side image resizing. Works with any server-side platform (PHP, Python, Ruby on Rails, Java, Node.js, Go etc.) that supports standard HTML form file uploads.">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>附件</title>
<script src="${staticPath}/lib/jquery/1.9.1/jquery-1.9.1.min.js" type="text/javascript"></script>

<link href="${staticPath}/lib/bootstrap/3.0.2/css/bootstrap.min.css" type="text/css" rel="stylesheet" />

<link rel="stylesheet" href="${staticPath}/lib/jQuery-File-Upload/jQuery-File-Upload-9.5.7/css/style.css">
<link rel="stylesheet" href="${staticPath}/lib/jQuery-File-Upload/jQuery-File-Upload-9.5.7/css/jquery.fileupload.css">
<link rel="stylesheet" href="${staticPath}/lib/jQuery-File-Upload/jQuery-File-Upload-9.5.7/css/jquery.fileupload-ui.css">
<link href="${staticPath}/css/layout.css" type="text/css" rel="stylesheet" />
<link href="${staticPath}/css/images.css" type="text/css" rel="stylesheet" />
        

<script src="${staticPath}/lib/jQuery-File-Upload/9.5.2/js/tmpl.min.js"></script>

<script src="${staticPath}/lib/jQuery-File-Upload/jQuery-File-Upload-9.5.7/js/load-image.min.js" ></script>

<script src="http://blueimp.github.io/JavaScript-Canvas-to-Blob/js/canvas-to-blob.min.js"></script>

<script src="${staticPath}/lib/jQuery-File-Upload/jQuery-File-Upload-9.5.7/js/vendor/jquery.ui.widget.js"></script>

<script src="${staticPath}/lib/jQuery-File-Upload/jQuery-File-Upload-9.5.7/js/jquery.iframe-transport.js"></script>

<script src="${staticPath}/lib/jQuery-File-Upload/jQuery-File-Upload-9.5.7/js/jquery.fileupload.js"></script>

<script src="${staticPath}/lib/jQuery-File-Upload/jQuery-File-Upload-9.5.7/js/jquery.fileupload-process.js"></script>

<script src="${staticPath}/lib/jQuery-File-Upload/jQuery-File-Upload-9.5.7/js/jquery.fileupload-image.js"></script>

<script src="${staticPath}/lib/jQuery-File-Upload/jQuery-File-Upload-9.5.7/js/jquery.fileupload-audio.js"></script>

<script src="${staticPath}/lib/jQuery-File-Upload/jQuery-File-Upload-9.5.7/js/jquery.fileupload-video.js"></script>

<script src="${staticPath}/lib/jQuery-File-Upload/jQuery-File-Upload-9.5.7/js/jquery.fileupload-validate.js"></script>

<script src="${staticPath}/lib/jQuery-File-Upload/jQuery-File-Upload-9.5.7/js/jquery.fileupload-ui.js"></script>

<script src="${staticPath}/lib/art-template/template.js"></script>

<script id="template-upload" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
    <tr class="template-upload fade">
        <td>
            <span class="preview img_preview"></span>
        </td>
        <td>
            <p class="name">{%=file.name%}</p>
            <strong class="error text-danger"></strong>
        </td>
        <td>
            <p class="size">Processing...</p>
            <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="progress-bar progress-bar-success" style="width:0%;"></div></div>
        </td>
        <td align="center">
            {% if (!i && !o.options.autoUpload) { %}
				<button class="btn btn-info btn-sm img_btn_info start" disabled>
                    <span class="img_text">开始上传</span>
                </button>
            {% } %}
            {% if (!i) { %}
                <button class="btn btn-default btn-sm img_btn_1 cancel">
                     <span class="img_text">取消</span>
                </button>
            {% } %}
        </td>
    </tr>
{% } %}
</script>

<!-- The template to display files available for download -->
<script id="template-download" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
    <tr class="template-download fade" attid="{%=file.attid %}" attName="{%=file.name%}" attSize="{%=file.size%}" attUrl="{%=file.url%}" attType="{%=file.fileType%}">
        <td>
            <span class="preview">
                {% if (file.thumbnail_url) { %}
                    <a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" data-gallery><img src="{%=file.thumbnail_url%}" style="height:60px;width:60px;"></a>
                {% } %}
            </span>
        </td>
        <td>
            <p class="name">
                {% if (file.url) { %}
                    <a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" {%=file.thumbnail_url?'data-gallery':''%}>{%=file.name%}</a>
                {% } else { %}
                    <span>{%=file.name%}</span>
                {% } %}
            </p>
            {% if (file.error) { %}
                <div><span class="label label-danger">Error</span> {%=file.error%}</div>
            {% } %}
        </td>
        <td>
            <span class="size">{%=o.formatFileSize(file.size)%}</span>
        </td>
        <td align="center">
            {% if (file.delete_url) { %}
                <button class="btn btn-danger btn-sm delete" data-type="{%=file.delete_type%}" data-url="${contextPath}{%=file.delete_url%}">
                    <i class="glyphicon glyphicon-trash"></i>
                    <span>删除</span>
                </button>
                <input type="checkbox" name="delete" value="1" class="toggle">
            {% } else { %}
                <button class="btn btn-warning btn-sm cancel">
                    <i class="glyphicon glyphicon-ban-circle"></i>
                    <span>取消</span>
                </button>
            {% } %}
        </td>
    </tr>
{% } %}
</script>
<script id="test1" type="text/html">
	{{each o.files as file}}
       <tr class="template-download" attid="{{file.attid}}" attName="{{file.name}}" attSize="{{file.size}}" attUrl="{{file.url}}" attType="{{file.fileType}}">
		   <td><span class="preview img_preview"><img src="${staticPath}/images/icon/fileIcon/{{o.formatFileIcon(file.fileType)}}"></span></td>
           <td>
			<p class="name">
				{{if file.url}}
                    <a href="${contextPath}{{file.url}}" title="{{file.name}}" download="{{file.name}}" {{file.thumbnail_url?'data-gallery':''}}>{{file.name}}</a>
                {{/if}}
				{{if !file.url}}
                    <span>{{file.name}}</span>
                {{/if}}
			</p>
			{{if file.error}}
                <div><span class="label label-danger">上传失败！</span> {{file.error}}</div>
            {{/if}}
		   </td>
           <td>
           	<p class="size">{{o.formatFileSize(file.size)}}</p>
           </td>
           <td align="center">
            {{if file.delete_url}}
                <button class="btn btn-danger btn-sm delete" data-type="{{file.delete_type}}" data-url="${contextPath}{{file.delete_url}}" >
                    <i class="glyphicon glyphicon-trash"></i>
                    <span>删除</span>
                </button>
                <input type="checkbox" name="delete" value="1" class="toggle">
            {{/if}}
			{{if !file.delete_url}}
                <button class="btn btn-warning btn-sm cancel">
                    <i class="glyphicon glyphicon-ban-circle"></i>
                    <span>取消</span>
                </button>
            {{/if}}
           </td>
		</tr>
	{{/each}}
</script>
<script>
	(function($) 
		 { 
		     $.extend( 
		     { 
		         urlGet:function() 
		         { debugger
		             var aQuery = window.location.href.split("?");//取得Get参数 
		             var aGET = new Array(); 
		             if(aQuery.length > 1) 
		             {
		                 var aBuf = aQuery[1].split("&"); 
		                 for(var i=0, iLoop = aBuf.length; i<iLoop; i++) 
		                 { 
		                     var aTmp = aBuf[i].split("=");//分离key与Value 
		                     aGET[aTmp[0]] = aTmp[1]; 
		                 } 
		             } 
		             return aGET; 
		         }, 
		     }); 
		 })(jQuery);
	
	$(function () {
		var obj = window.dialogArguments;
		var getParams = $.urlGet(); //获取URL的Get参数
		//alert(getParams);debugger
		var handlerUploadURL = obj.getVal('handlerUploadURL',getParams['r']);
		var val = 'modleName='+obj.getVal('modleName',getParams['r'])+'&key='+obj.getVal('key',getParams['r'])+'&soureBillID='+obj.getVal('soureBillID',getParams['r']);
		var downloadFileListURL = obj.getVal('downloadFileListURL',getParams['r'])+"?"+val;
		/* 后台请求该单据的附件数据 */
		$.ajax({
			url: downloadFileListURL,
			success:function(data){
				data = {o:eval("("+data+")")};
				data.o.formatFileSize = function(size){
        			return (size / 1000)+'KB';
        		};
				data.o.formatFileIcon = function(fileType){
					switch(fileType){
						case "application/msword":return "doc.png";
						case "application/vnd.openxmlformats-officedocument.wordprocessingml.document":return "doc.png";
						case "application/vnd.ms-excel":return "xls_1.png";
						case "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet":return "xls.png";
						case "application/vnd.ms-powerpoint":return "pdf.png";
						case "application/pdf":return "pdf.png";
						case "text/plain":return "text.png";
						case "application/x-jpg":return "img.png";
						case "application/x-ico":return "img.png";
						case "application/x-bmp":return "img.png";
						case "image/gif":return "img.png";
						case "image/png":return "img.png";
						case "image/jpeg":return "img.png";
						default:return "documents.png";
					}
        		};
				$('.files').append(template('test1', data));
			},
			failure:function(){
				alert('数据请求失败!请重试');
				window.close();
			}
		});
		var fileuploadParameter = {
		    	url: handlerUploadURL+"?"+val,//'${contextPath}/sys/att/upload',
		        dataType: 'json',
		        singleFileUploads: true
		};
		//文件上传大小限制
		var maxFileSize = obj.getVal('maxFileSize',getParams['r']);
		if(maxFileSize && !isNaN(parseInt(maxFileSize))){
			fileuploadParameter.maxFileSize = parseInt(obj.getVal('maxFileSize',getParams['r']));
		}
	    $('#fileupload').fileupload(fileuploadParameter);
	    /* 关闭按钮  */
	    $('#btn_confirm').click(function() {
	    	var rtnObj = {};
	    	var files = new Array();
	    	$.each($('[attid]'),function(ind,obj){
	    		var $obj = $(obj);
	    		var file = {};
	    		file.attid = $obj.attr('attid');
		    	file.name = $obj.attr('attName');
		    	file.url = $obj.attr('attUrl');
		    	file.fileType = $obj.attr('attType');
		    	file.size = $obj.attr('attSize');
	    		files[ind] = file;
	    	});
	    	rtnObj.key = obj.getVal('key',getParams['r']);
	    	rtnObj.files = files;
	    	window.returnValue = rtnObj;
	    	window.close();
	    });
	    /* 关闭按钮  */
	    $('#btn_close').click(function() {
	    	$.ajax({
				url: "",
				success:function(data){
					window.close();
				},
				failure:function(){
					window.close();
				}
			});
	    	window.close();
	    });
	});
</script>
</head>
<body style="background-color: #fff;padding-top: 0;">
<div class="img_nav_top">附件上传</div>
<nav id="fileupload" method="POST" enctype="multipart/form-data" role="navigation">
  	<!-- <div style="overflow: scroll;"> -->
       <div class="fileupload-buttonbar navbar navbar-default img_navbar_default_top">
           <div class="col-lg-5">
               <span class="btn btn-success fileinput-button">
                   <i class="glyphicon glyphicon-plus"></i>
                   <span>添加附件</span>
                   <input type="file" name="files[]" multiple="">
               </span>
               <button type="submit" class="btn btn-info img_padding_btn img_btn_info start">
                   <i class="glyphicon glyphicon-upload"></i>
                   <span>开始上传</span>
               </button>
               <button type="reset" class="btn btn-default img_btn_1 img_padding_btn img_margin cancel">
                   <i class="glyphicon glyphicon-ban-circle"></i>
                   <span>&nbsp;取&nbsp;&nbsp;消</span>
               </button>
               <span class="fileupload-process"></span>
           </div>
           <div class="col-lg-5 fileupload-progress fade">
               <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
                   <div class="progress-bar progress-bar-success bar" style="width:0%;"></div>
               </div>
               <div class="progress-extended">&nbsp;</div>
           </div>
       </div>
       <table role="presentation" class="img_table"><tbody class="files">
       </tbody></table>
   <!-- </div> -->
   </nav>
   <div class="well navbar-fixed-bottom" style="margin:5px 0 0 0;text-align: right;">
   		<button type="button" id="btn_confirm" class="btn btn-success">确定</button>
   </div>
</body>
</html>